<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Exercise - Transformations</title>
    <link type="text/css" href="../resources/webgl-tutorials.css" rel="stylesheet" />
    <style>
        canvas {
            display: block;
            width: 100vw;
            height: 100vh;
        }

        body {
            font-family: Sans-Serif;
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>
</body>

</html>
<script id="2d-vertex-shader" type="notjs">
    attribute vec3 a_position;
    attribute vec2 a_texCoord;
    
    varying vec2 v_texCoord;
    
    uniform mat4 u_matrix;

    void main(){
        gl_Position = u_matrix * vec4(a_position.x, (-1.0) * a_position.y, a_position.z, 1.0);
        v_texCoord = a_texCoord;
    }
</script>
<script id="2d-fragment-shader" type="notjs">

    precision mediump float;
    varying vec2 v_texCoord;

    uniform sampler2D u_image0;
    uniform sampler2D u_image1;
    
    void main(){
        gl_FragColor = mix(texture2D(u_image0, v_texCoord), texture2D(u_image1, v_texCoord), 0.2);

        // vec4 color0 = texture2D(u_image0, v_texCoord);
        // vec4 color1 = texture2D(u_image1, v_texCoord);
        // gl_FragColor = color0 * color1;
    }
</script>
<!-- <script src="../resources/webglUtils.js"></script> -->
<script type="module">
    "use strict";

    import webglUtils from '../resources/webglUtils.js';
    import glm from '../resources/glm.js';

    function loadImage(url, callback) {
        let image = new Image();
        image.src = url;
        image.onload = callback;
        return image;
    }

    function loadImages(urls, callback) {
        let images = [];
        let imagesToLoad = urls.length;

        let onImageLoad = () => {
            --imagesToLoad;
            if (imagesToLoad === 0) {
                callback(images);
            }
        };

        for (let ii = 0; ii < imagesToLoad; ++ii) {
            let image = loadImage(urls[ii], onImageLoad);
            images.push(image);
        }
    }

    function main() {
        loadImages([
            "../resources/container.jpg",
            "../resources/awesomeface.jpg",
        ], render)
    }

    function render(images) {
        /** @type {HTMLCanvasElement} */
        let canvas = document.getElementById('canvas');
        let gl = canvas.getContext('webgl');
        if (!gl) {
            return;
        }

        let program = webglUtils.createProgramFromSecripts(gl, ["2d-vertex-shader", "2d-fragment-shader"]);

        let positions = [
            0.5, 0.5, 0.0, 1.0, 1.0,
            0.5, -0.5, 0.0, 1.0, 0.0,
            -0.5, -0.5, 0.0, 0.0, 0.0,
            -0.5, 0.5, 0.0, 0.0, 1.0
        ];
        let indices = [
            0, 1, 3,
            1, 2, 3
        ]

        webglUtils.resizeCanvasToDisplaySize(canvas);
        gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
        // webglUtils.resizeCanvasToDisplaySize(gl.canvas);

        let positionAttributeLocation = gl.getAttribLocation(program, "a_position");
        let textureAttributeLocation = gl.getAttribLocation(program, "a_texCoord");

        let positionBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

        let indicesBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indicesBuffer);
        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);

        gl.enableVertexAttribArray(positionAttributeLocation);
        gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 5 * 4, 0);//??stride的值
        gl.enableVertexAttribArray(textureAttributeLocation);
        gl.vertexAttribPointer(textureAttributeLocation, 2, gl.FLOAT, false, 5 * 4, 3 * 4);

        let textures = [];
        for (let ii = 0; ii < 2; ii++) {
            let texture = gl.createTexture();
            gl.bindTexture(gl.TEXTURE_2D, texture);

            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, images[ii]);
            gl.generateMipmap(gl.TEXTURE_2D);

            textures.push(texture);
        }

        gl.useProgram(program);

        let matrixLocation=gl.getUniformLocation(program, "u_matrix");

        // 寻找取样器的位置
        let u_image0Location = gl.getUniformLocation(program, "u_image0");
        let u_image1Location = gl.getUniformLocation(program, "u_image1");
        // 设置使用的纹理单元
        gl.uniform1i(u_image0Location, 0);  // 纹理单元 0
        gl.uniform1i(u_image1Location, 1);  // 纹理单元 1

        gl.clearColor(0.2, 0.3, 0.3, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);

        gl.activeTexture(gl.TEXTURE0);
        gl.bindTexture(gl.TEXTURE_2D, textures[0]);
        gl.activeTexture(gl.TEXTURE1);
        gl.bindTexture(gl.TEXTURE_2D, textures[1]);

        // gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);

        function renderer(time) {
            time *= 0.001;

            gl.clearColor(0.2, 0.3, 0.3, 1.0);
            gl.clear(gl.COLOR_BUFFER_BIT);

            gl.useProgram(program);

            let aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
            let matrix = glm.scaling(1, aspect, 1);
            matrix = glm.zRotate(matrix, time);
            // matrix = glm.scale(matrix, 0.5, 0.5, 1);

            // Set the matrix.
            gl.uniformMatrix4fv(matrixLocation, false, matrix);

            gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);

            requestAnimationFrame(renderer);
        }
        requestAnimationFrame(renderer);
    }

    main();
</script>